<template>
  <div>
    <h1>App---我的count的值是{{ count }}</h1>
    <button @click="$refs.child.$off()">解绑子组件Child的所有自定义事件</button>
    <hr />
    <!-- 在自定义事件的插值语法中,也存在一个变量 $event代表传递的值-->
    <!-- <Child @add-count="count++" @addn-count="count += $event" /> -->
    <Child ref="child" />
  </div>
</template>

<script>
import Child from "./components/Child";
export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      count: 0,
    };
  },
  mounted() {
    //绑定自定义事件一般都会在mounted初始化的时候绑定
    /* $on绑定自定义事件 $once绑定一次性自定义事件 */
    this.$refs.child.$once("add-count", this.addCount);
    this.$refs.child.$on("addn-count", this.addnCount);
  },
  methods: {
    addCount() {
      this.count++;
    },
    addnCount(n) {
      this.count += n;
    },
  },
};
</script>

<style></style>